<!-- 柱状图 -->
<template>
  <div class="class_default" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from '@/views/dashboard/mixins/resize'

  const animationDuration = 6000

  export default {
    name: "barChart",
    mixins: [resize],
    props: {
      chartData: {
        type: Object,
        default() {
          return {
            title: '',  // 图表标题
            xName: [],  // X轴每一个点的名称
            xLabel: '', // X轴名称
            xData: [],  // X轴数据
            yLabel: ''  // Y轴名称
          }
        }
      }
    },
    // props: ['chartData'],
    data() {
      return {
        chart: null,
        series: []
      }
    },
    mounted() {
      // 先处理数据
      this.initData();
      // 创建图表
      this.chart = echarts.init(this.$el, 'macarons');
      this.$nextTick(() => {
        // 加载图表数据
        this.setChartData()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    // 监听到图表数据变化，处理数据并重新渲染图表
    watch: {
      chartData: {
        handler(chartData) {
          this.chartData = chartData;
          this.initData()
          this.$nextTick(() => {
            this.setChartData()
          })
        },
        // immediate: true,
        deep: true  // 针对于对象，深度监听
      }
    },
    methods: {
      // 初始化图表的数据
      initData() {
        this.series = []
        this.chartData.xData.forEach(el => {
          let serie = {
            name: el.name,
            type: 'bar',
            barWidth: '20%',
            barGap: '20%',
            data: el.data,
            itemStyle: {
              normal: {
                label: {
                  show: true, // 开启显示
                  position: 'top', // 在上方显示
                  textStyle: { // 数值样式
                    color: 'black',
                    fontSize: 10
                  }
                }
              }
            },
            animationDuration
          }
          this.series.push(serie);
        });
      },
      // 加载图表数据
      setChartData() {
        // option是个大的JavaScript对象，option的每个属性是一类组件。多数组件和系列，都能够基于top、right、bottom、left(坐标系与容器顶部、右边、底部、左边的距离)、width、height(坐标系宽高)进行绝对定位。绝对定位基于的是echarts容器DOM节点
        this.chart.setOption({
          //【title组件】：图表标题
          title: {
            text: this.chartData.title,
            x: 'left',  // 水平安放位置，默认为左对齐，可选为：'left'、'center'、'right'、一个数字(单位px，例如 x: 20,)
            y: 'top',  // 垂直安放位置，默认为全图顶端，可选为：'top'、'center'、'bottom'、一个数字(单位px)
            textStyle: {
              fontSize: 18,
              fontWeight: 'bolder',
              color: '#333'  // 主标题文字颜色
            },
          },
          //【legend组件】：图例(标示柱状图或折线等的所属类型，标示什么颜色的柱状图代表什么类型的统计)
          legend: {
            itemGap: 15,  // 各个item之间的间隔，单位px，默认为10
          },
          //【tooltip组件】：提示框(鼠标移入图表后的弹窗提示)
          tooltip: {
            trigger: 'axis', // 触发类型，默认数据触发，可选为：'item' ¦ 'axis'
            axisPointer: {   // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          //【grid组件】：直角坐标系的底板
          grid: {
            top: '25%',
            left: '2%',
            right: '2%',
            bottom: '3%',
            containLabel: true
          },
          //【xAxis组件】：直角坐标系X轴
          xAxis: [{
            type: 'category',
            name: this.chartData.xLabel,
            data: this.chartData.xName,
            axisTick: {
              alignWithLabel: true
            }
          }],
          //【yAxis组件】：直角坐标系Y轴
          yAxis: [{
            type: 'value',
            name: this.chartData.yLabel,
            axisTick: {
              show: false
            }
          }],
          // series(系列)：一组数值以及他们映射成的图
          //   name：
          //   type：图表类型：line(折线图)、bar(柱状图)、pie(饼图)、scatter(散点图)、graph(关系图)、tree(树图)、...
          //   stack：数据堆叠，同个类目轴上柱状图配置相同的stack值可以堆叠放置。stack值的类型为string，默认状态下为null
          //   barWidth：柱条的宽度，不设置时自适应，其值为number或string类型，支持设置成相对于类目宽度的百分比。设置在最后一个bar对象中才生效
          //   barGap：柱间距离(默认值'30%'，为柱子宽度的30%)，取值为string类型。如果想要两个系列的柱子重叠，可以设置为'-100%'。设置在最后一个bar对象中才生效
          //   barCategoryGap：类目间柱形距离，默认为类目间距的20%，取值为 string 类型。设置在最后一个bar对象中才生效
          //   data：数据
          series: this.series
        });
      }
    }
  }
</script>

<style scoped>
  .class_default {
    width: 100%;
    height: 300px;
  }
</style>
